let height = document.querySelectorAll('#content>.wrap>ul>.content_word>.hide')
let content = document.querySelectorAll('#content>.wrap>ul>.content_word')
let hhh = document.querySelectorAll('#content>.wrap>ul>.content_word>h2')

for (let i = 0; i < hhh.length; i++) {
    hhh[i].addEventListener('mouseover', function () {
        content[i].classList.add('bgred')
        height[i].style.height = '390px'
        height[i].style.zIndex = '10'
        height[i].style.opacity = '1'

    })
    content[i].addEventListener('mouseleave', function () {
        content[i].classList.remove('bgred')
        height[i].style.height = '0px'
        height[i].style.opacity = '0'
    })
}

let imgs = document.querySelectorAll('#content>.big_box>.img_box>img')
let box = document.querySelector('#content>.big_box>.img_box')
let dot = document.querySelectorAll('#content>.big_box>.big_box_pos>.pos_dot')
let timer
aotu()

function aotu() {
    timer = setInterval(function () {
        fn(true)
    }, 3000)
}

let n = 0;

function fn(boolen) {
    if (boolen) {
        n++;
        if (n >= imgs.length) {
            n = 0;
        }
        let pos = n * (-1903)
        for (let j = 0; j < imgs.length; j++) {
            dot[j].classList.remove('bgred')
        }
        dot[n].classList.add('bgred')
        box.style.left = `${pos}px`
    } else {
        n--;
        if (n < 0) {
            n = imgs.length - 1;
        }
        let pos = n * (-1903)
        for (let j = 0; j < imgs.length; j++) {
            dot[j].classList.remove('bgred')
        }
        dot[n].classList.add('bgred')
        box.style.left = `${pos}px`
    }
}

box.addEventListener('mouseover', function () {
    clearInterval(timer)
})
box.addEventListener('mouseleave', function () {
    aotu()
})
for (let i = 0; i < dot.length; i++) {
    dot[i].index = i
    dot[i].addEventListener('click', function () {
        box.style.left = `${this.index * (-1903)}px`
        n = dot[i].index
        clearInterval(timer)
        for (let j = 0; j < dot.length; j++) {
            dot[j].classList.remove('bgred')
        }
        dot[n].classList.add('bgred')
    })
}


let last = document.querySelector('.bgf2f>.wrap>.last')
let next = document.querySelector('.bgf2f>.wrap>.next')
let span = document.querySelector('.bgf2f>.wrap>.box_img')
let imgq = document.querySelectorAll(".bgf2f>.wrap>.box_img>.item>img")
let ioo = document.querySelectorAll('.bgf2f>.wrap>.box_img>.item>div')
let item = document.querySelectorAll('.bgf2f>.wrap>.box_img>.item')
let q = 0
last.style.backgroundPositionY = '-28px'

function lkssb(boolen) {
    if (boolen) {
        if (q == 1) {
            next.style.backgroundPositionY = '-28px'
        }
        if (q >= 2) {
            return;
        }
        q++
        let p = q * -1000
        span.style.left = `${p}px`
    } else {
        if (q == 1) {
            last.style.backgroundPositionY = '-28px'
        }
        if (q <= 0) {
            return
        }
        q--
        let p = q * -1000
        span.style.left = `${p}px`
    }
}

last.addEventListener('click', function () {
    lkssb(false)
    next.style.backgroundPositionY = '0px'
})
next.addEventListener('click', function () {
    lkssb(true)
    last.style.backgroundPositionY = '0px'
})

for (let i = 0; i < item.length; i++) {
    item[i].addEventListener('mouseover', function () {
        imgq[i].style.transform = 'scale(1.2)'
        ioo[i].classList.add('item_word')
    })
    item[i].addEventListener('mouseleave', function () {
        imgq[i].style.transform = 'scale(1)'
        ioo[i].classList.remove('item_word')
    })
}

//底部更换
let come = document.querySelectorAll('.come')
let go = document.querySelectorAll('.go')
let rqr = document.querySelectorAll('.footer_right_bottom_left')
for (let h = 0; h < come.length; h++) {
    rqr[h].addEventListener('mouseover', function () {
        come[h].classList.add('none')
        go[h].classList.remove('none')
    })
    rqr[h].addEventListener('mouseleave', function () {
        come[h].classList.remove('none')
        go[h].classList.add('none')
    })

}

//李柯
let items = document.querySelectorAll('#header > .wrap > .fl > .item ')
let customers = document.querySelectorAll('.customer')
for (let i = 0; i < items.length; i++) {
    items[i].addEventListener("click", function () {
        for (let j = 0; j < items.length; j++) {
            items[j].classList.remove('fff')
            customers[j].classList.add('none')
        }
        items[i].classList.add('fff')
        customers[i].classList.remove('none')
    })
}
//跑马灯共用
let scrollMessageUl = document.querySelectorAll('.scrollMessage ul')
setInterval(() => {
    for (let i = 0; i < scrollMessageUl.length; i++) {
        startMove(scrollMessageUl[i], {'marginTop': '-25px'}, 200, 'linear', () => {
            scrollMessageUl[i].appendChild(scrollMessageUl[i].querySelectorAll('li')[0])
            scrollMessageUl[i].style.marginTop = "0px"
        })
    }
}, 3000);
//渲染数据
let datas = [
    ['关注电子银行微信', '余额查询', '明细查询', '开户网点查询', '网点及ATM查询', '服务价目表', '业务验证'],
    ['注册电子银行', '开通余额变动提醒', '申请贷款', '申请信用卡', '申请借记卡', '章程协议', '电子发票申请'],
    ['网点预约取号', '大额现金取款', '外币现金取款', '开立资信证明', '预约纪念币'],
    ['融e购', '水电燃气', '手机充值', '交通缴费', '医院挂号', '代缴学费'],
    ['存贷利率', '外汇牌价', '贵金属行情', '商品交易行情', '理财计算器']
]
let uls = document.querySelectorAll('.fast-track > .wrap > ul > li > .serveBoxDown > ul')
let lis = document.querySelectorAll('.fast-track > .wrap > ul > li')
datas.forEach((items, index) => {
    items.forEach(item => {
        let li = document.createElement('li')
        let a = document.createElement('a')
        let text = document.createTextNode(item)
        a.appendChild(text)
        li.appendChild(a)
        uls[index].appendChild(li)
    })
})
datas.forEach((items, index) => {
    lis[index].addEventListener('mouseover', () => {
        uls[index].style.height = items.length * 32 + 'px'
    })
    lis[index].addEventListener('mouseout', () => {
        uls[index].style.height = '0px'
    })
})
//投资理财,遍历金融选项卡共用代码
let options = document.querySelectorAll('.option')
let tabcs = document.querySelectorAll('.tabc')
let timerout = null
for (let i = 0; i < options.length; i++) {
    options[i].addEventListener('mouseover', () => {
        if (timerout) clearTimeout(timerout)
        timerout = setTimeout(() => {
            for (let j = 0; j < options.length; j++) {
                if (options[j].getAttribute("data-type") === tabcs[i].getAttribute("data-type")) {
                    options[j].classList.remove('on')
                    tabcs[j].classList.remove('block')
                }
            }
            options[i].classList.add('on')
            tabcs[i].classList.add('block')
        }, 550)
    })
}
//轮播
let number = 0
let owlWrapper = document.querySelector('.owl-wrapper ')
let owlWrapperImgs = document.querySelectorAll('.owl-wrapper img')
let pos_bots = document.querySelectorAll('.action_Y_more .big_box_pos > .pos_dot')
let self = document.querySelector('#self')
let timer1 = null
auto1()

function auto1() {
    timer1 = setInterval(function () {
        number++
        number %= owlWrapperImgs.length
        for (let i = 0; i < pos_bots.length; i++) {
            pos_bots[i].classList.remove('bgred')
        }
        pos_bots[number].classList.add('bgred')
        owlWrapper.style.left = number * -450 + 'px'
    }, 2000)
}

for (let i = 0; i < pos_bots.length; i++) {
    pos_bots[i].index = i
    pos_bots[i].addEventListener('click', () => {
        pos_bots[number].classList.remove('bgred')
        number = pos_bots[i].index
        pos_bots[number].classList.add('bgred')
        owlWrapper.style.left = number * -450 + 'px'
    })
}
self.addEventListener('mouseover', () => {
    clearInterval(timer1)
})
self.addEventListener('mouseout', () => {
    auto1()
})
//图片懒加载
onscroll = () => {
    // console.log(imgsLazy[10], imgsLazy[10].getBoundingClientRect().top, window.innerHeight)
    [...document.querySelectorAll('img')]
        // Array.from(document.querySelectorAll('img'))
        .forEach(e => {
            if (e.getBoundingClientRect().top <= window.innerHeight) {
                if (!e.src) {
                    e.src = e.dataset.src;
                }
            }
        })
}
